/**
 * Created by levy on 16/6/15.
 */

{
    /**
     * @desc
     */
    const DetailRowStatus = React.createClass({
        getDefaultProps: function () {
            return {
                statusName: ''
            }
        },
        render: function () {
            var props = this.props,
                statusClass = 'green';

            var statusName = props.isCurrent == true ? props.statusName + '中' :
                    props.isBack ? '已退回' :
                        props.statusName == '领导审核' ? '已审核' :
                        '已' + props.statusName;

            if(props.statusName == '客服回访' && props.isFinished)
                statusName = '已回访';

            if(props.isFinished &&
                (props.statusName == '办理' ||
                 props.statusName == '领导审核' ||
                 props.statusName == '客服回访' )){

                statusClass += ' green-text-line';
            }

            return (
                <span ref="statusBtn" className={statusClass}>{statusName}</span>
            )
        },
        componentDidMount: function () {
            this.showTaskLayer();
        },
        componentDidUpdate: function ( ) {
            this.showTaskLayer();
        },
        showTaskLayer() {
            var me = this,
                $btn = $(React.findDOMNode(me.refs.statusBtn));

            if($btn.hasClass('green-text-line')){
                $btn.off();

                $btn.on('tap', function () {
                    me.props.taskLayerRender(me.props.index);
                });
            }
        }
    });

    /**
     * @desc 进度详情，审批的流程日志就是用它
     */
    var ProgressDetail = React.createClass({
        render: function () {
            var props = this.props,
                dt = this.props.data;

            //审批
            if(props.isApproval){
                var operator = dt.operator.length > 5 ? dt.operator.substr(0,4) + '...' : dt.operator,
                    personName = dt.displayName + ' (' + operator + ')',
                    time = dt.finishTime,
                    cls = '';
                if(!time){
                    cls = 'red';
                    time = '当前步骤';
                }
            }
            else{
                var time = liefeng.utils.format(dt.acceptTime,'MM-dd hh:mm'),
                    personName = dt.currAccepterName;
            }

            //levy: 这里是从工单详情接口返回的数据
            //没有该字段说明是当前步骤
            if(!personName){
                liefeng.taskInfo.id = dt.id;
                liefeng.taskInfo.wfTaskId = dt.wfTaskId;
                //适配之前缺失的数据
                //注:eventId从外层取

                return (
                    <div className = "tpd-row">
                        <p className="tpd-left-con"><i></i><span className="task-processing-name text-dot">{personName}</span>
                            <DetailRowStatus
                                index={props.index}
                                isCurrent={true}
                                isFinished={dt.status == '3' ? true : false}
                                isBack={dt.status == 2 ? true : false}
                                statusName={dt.taskDisplayName}
                                taskLayerRender={this.props.taskLayerRender} />
                        </p>
                        <aside><p >{time}</p></aside>
                    </div>
                );
            }

            var nameArray = personName.split('--');
            personName = nameArray[nameArray.length - 1];

            return (
                <div className="tpd-row">
                    <p className="tpd-left-con"><i></i><span className="task-processing-name text-dot">{personName}</span>
                        {
                            props.isApproval ? '' :
                                <DetailRowStatus
                                    index={props.index}
                                    isCurrent={false}
                                    isFinished={dt.status == '3' ? true : false}
                                    isBack={dt.status == 2 ? true : false}
                                    statusName={dt.taskDisplayName}
                                    taskLayerRender={this.props.taskLayerRender} />
                        }
                    </p>
                    <aside><p className={cls}>{time}</p></aside>
                </div>
            )
        }
    });
}

export default ProgressDetail;
